<!--
 * @Author: maomao
 * @Date: 2021-04-19 10:07:55
 * @Description: 
 * @FilePath: \client-app\src\views\index.vue
-->
<template>
  <div class="wrapper">
    <Tree   v-model:treeData="treeData"  @item-context-menu="test" />
    <div>123</div>
  </div>
</template>
<script>
  import { Options, Vue } from "vue-property-decorator/lib";
  import DxButton from "devextreme-vue/button";
  import Tree  from '@/framework/components/tree/tree.vue';
import CollectionWidget from "devextreme/ui/collection/ui.collection_widget.base";
  @Options({
    components: {
      DxButton,
      Tree,
    },
  })
  export default class Index extends Vue {
    treeData = [{
      id: "A",
      parentid: "1",
      name: "測試",
      items: [{
        id: "2",
        parentid: "1",
        name: "測試1",
        items:[]
      },{
        id: "3",
        parentid: "1",
        name: "測試1",
        items:[]
      },{
        id: "4",
        parentid: "1",
        name: "測試1",
        items:[]
      }]
    }, {
        id: "B",
        parentid: "",
        name: "測試",
        items: [{
          id: "B2",
          parentid: "A",
          name: "測試1",
          items: []
        }, {
          id: "B3",
          parentid: "A",
          name: "測試1",
          items: []
        }, {
          id: "B4",
          parentid: "A",
          name: "測試1",
          items: []
        }]
      }];

    test(v) {
      console.log("測試", v.id);
    }

  }
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
}
</style>